<!-- #layout name=default -->
<style>
  #category_tree {
    padding: 10px 0;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    max-height: 460px;
    overflow-y: auto;
  }

  .category-list,
  .sub-category-list {
    list-style: none;
    padding-left: 10px;
    margin-bottom: 0;
  }

  .sub-category-list {
    padding-left: 30px;
  }

  .sub-category-list li {
    position: relative;
  }

  .sub-category-list li::before {
    content: "";
    width: 15px;
    height: 21px;
    background-image: url(/_Admin/Styles/images/jstree.png);
    background-position: -79px -2px;
    position: absolute;
    left: -23px;
    top: -3px;
  }

  .tree-checkbox label {
    cursor: pointer;
    margin-bottom: 6px;
  }

  .tree-checkbox label .icon {
    width: 22px;
    height: 15px;
    background-image: url(/_Admin/Styles/images/jstree.png);
    background-position: -169px -9px;
    display: inline-block;
    position: relative;
    top: 2px;
  }

  .tree-checkbox label.checked .icon {
    background-position: -233px -9px;
  }

  .tree-checkbox label input[type="checkbox"] {
    display: none;
  }

  .selected-cates-container {
    border: 1px solid #e5e5e5;
    border-right: 0;
    border-radius: 2px 0 0 2px;
    padding: 6px 6px;
    height: 32px;
  }

  .selected-cates-container span.cate {
    padding: 2px 4px;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    cursor: default;
    margin-right: 3px;
    user-select: none;
  }
</style>
<div id="main" class="clearfix">
  <div class="col-md-8 col-md-offset-2">
    <fieldset class="margin-bottom-15 clearfix">
      <legend>
        <div class="pull-left">Basic info</div>
        <kb-multilang-selector
          class="clearfix margin-bottom-5"
          :cultures="siteLangs.cultures"
          :default-culture="siteLangs.default"
        >
        </kb-multilang-selector>
      </legend>
      <kb-field-panel
        class="clearfix"
        ref="fieldPanel"
        :fields="fields"
        :values.sync="contentValues"
        :site-langs="siteLangs"
      ></kb-field-panel>
      <div class="col-md-11">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-md-3">Category</label>
            <div class="col-md-9">
              <div class="input-group">
                <div class="selected-cates-container">
                  <span
                    class="cate"
                    v-for="($data, index) in selectedCategories"
                    :key="index"
                    >{{ $data.name }}</span
                  >
                </div>
                <span class="input-group-btn">
                  <button class="btn blue" @click="onShowCategoriesModal"
                    >Select</button
                  >
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset class="margin-bottom-25 clearfix">
      <legend>Specification &amp; stock</legend>
      <kb-commerce-spec
        class="col-md-11"
        :fields="dynaSpecFields"
        @change="dynamicFieldsChange"
      ></kb-commerce-spec>
    </fieldset>
    <table class="table table-striped table-hover table-bordered">
      <thead>
        <tr>
          <th v-for="($data, index) in specNames" :key="index">{{ $data }}</th>
          <th class="table-short">Stock</th>
          <th class="table-short">Price</th>
          <th>SKU</th>
          <th>SKU preview</th>
          <th>Images</th>
          <th class="table-action">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="($data, index) in typesMatrix" :key="index">
          <td v-for="(type, tIndex) in $data.types" :key="tIndex"
            >{{ type.value }}</td
          >
          <td>
            <div class="form-group" :class="{'has-error': $data.error.stock }">
              <input
                type="number"
                min="0"
                class="form-control input-xsmall"
                v-model="$data.stock"
                v-kb-tooltip:top.manual.error="$data.error.stock && Kooboo.text.validation.required"
                @change="validateInput($data, 'stock')"
              />
            </div>
          </td>
          <td>
            <div class="form-group" :class="{'has-error': $data.error.price }">
              <input
                type="number"
                min="0"
                class="form-control input-xsmall"
                v-model="$data.price"
                v-kb-tooltip:top.manual.error="$data.error.price && Kooboo.text.validation.required"
                @change="validateInput($data, 'price')"
              />
            </div>
          </td>
          <td>
            <div class="form-group">
              <input
                type="text"
                class="form-control input-xsmall"
                v-model="$data.sku"
              />
            </div>
          </td>
          <td>
            <button class="btn blue" @click="selectSkuPic($data)"
              >Select file</button
            >
            <div class="file-list">
              <ul v-if="$data.skuImage">
                <li>
                  <div class="fileinput-new thumbnail">
                    <img
                      :src="$data.skuThumbnail"
                      style="width: 80px; height: 80px;"
                    />
                  </div>
                  {{ $data.skuImage }}
                  <a
                    @click="removeSkuPic($data)"
                    :title="Kooboo.text.common.remove"
                    href="javascript:;"
                  >
                    <i class="fa fa-remove"></i>
                  </a>
                </li>
              </ul>
            </div>
          </td>
          <td>
            <button class="btn blue" @click="selectImages($data)"
              >Select file</button
            >
            <div class="file-list">
              <ul v-if="$data.images && $data.images.length">
                <li v-for="(img, imgIndex) in $data.images" :key="imgIndex">
                  <div class="fileinput-new thumbnail">
                    <img
                      :src="img.thumbnail"
                      style="width: 80px; height: 80px;"
                    />
                  </div>
                  {{ img.url }}
                  <a
                    @click="removeImg($data, imgIndex)"
                    :title="Kooboo.text.common.remove"
                    href="javascript:;"
                  >
                    <i class="fa fa-remove"></i>
                  </a>
                </li>
              </ul>
            </div>
          </td>
          <td>
            <a
              href="javascript:;"
              class="label"
              @click="toggleStatus($data)"
              :class="$data.online ? 'green' : 'label-default'"
            >
              {{ Kooboo.text.commerce.product[$data.online ? 'inStock' :
              'dropOff'] }}
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <kb-media-dialog
    :data.sync="mediaDialogData"
    :multiple="multipleMedia"
  ></kb-media-dialog>
  <div
    v-kb-modal="showCategoriesModal"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onHideCategoriesModal"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Category</h4>
        </div>
        <div class="modal-body">
          <div id="category_tree" v-if="categories.length">
            <ul class="category-list">
              <li v-for="($data, index) in categories" :key="index">
                <product-category :category="$data"></product-category>
              </li>
            </ul>
          </div>
          <p v-else class="form-control-static"
            >You don't have a category yet.</p
          >
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onSaveCategoriesModal">Save</button>
          <button class="btn gray" @click="onHideCategoriesModal"
            >Cancel</button
          >
        </div>
      </div>
    </div>
  </div>

  <div class="page-buttons">
    <div v-if="!isNew" class="btn-group dropup">
      <button @click="onSaveAndReturn" class="btn green" style="margin: 0;"
        >Save &amp; Return</button
      >
      <a
        class="btn green dropdown-toggle"
        data-toggle="dropdown"
        style="margin:0;min-width:auto;"
      >
        <i class="fa fa-angle-up"></i>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li>
          <a href="javascript:;" @click="onSave">Save</a>
        </li>
      </ul>
    </div>
    <button v-else @click="onSave" class="btn green">Save</button>
    <a :href="typesUrl" class="btn gray">Cancel</a>
  </div>
</div>
<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/Kooboo/Guid.js",
    "/_Admin/Scripts/components/kbMultilangSelector.js",
    "/_Admin/Scripts/components/kbFieldPanel.js",
    "/_Admin/Scripts/components/ECommerce/kbCommerceSpec.js"
  ]);
</script>
<script src="/_Admin/View/ECommerce/Product.js"></script>

<script type="text/x-template" id="category-template">
  <div class="tree-checkbox">
      <label :class="{checked: category.selected }">
          <i class="icon"></i>
          <input type="checkbox" v-model="category.selected">
          {{ category.name }}
      </label>
      <ul v-if="category.subCats.length" class="sub-category-list">
          <li v-for="(subCate, index) in category.subCats" :key="index">
            <product-category :category="subCate"></product-category>
          </li>
      </ul>
  </div>
</script>
